<template>
    <view class="shop-store-manage position-r">
        <image class="shop-store-manage__bg full-w position-a left0 top0" src="@/static/store_bg.png" mode="widthFix"></image>
        <u-navbar
            :autoBack="true"
            leftIconColor="#ffffff"
            :titleStyle="{ color: '#ffffff',}"
            bgColor="rgba(0,0,0,0)"
            title="门店管理"
        >
        </u-navbar>

        <view class="shop-store-manage__header  mr-v-24 position-r">
            <view class="border8 pd-l-24 bg-white">
                <u--form
                    labelWidth="100"
                    labelPosition="left"
                    :model="form"
                    ref="uForm"
                >
                    <u-form-item
                        label="门店名称"
                        prop="name"
                        borderBottom
                    >
                        <u--input
                            v-model.trim="form.name"
                            border="none"
                            color="#B3ADAE"
                            :customStyle="{padding:'12rpx 0'}"
                            placeholder="请输入门店名称"
                            @change="search"
                        ></u--input>
                    </u-form-item>
                    <u-form-item
                        label="所属商户"
                        prop="merchantName"
                        borderBottom
                    >
                        <u--input
                            v-model.trim="form.merchantName"
                            border="none"
                            color="#B3ADAE"
                            :customStyle="{padding:'12rpx 0'}"
                            placeholder="请输入所属商户"
                            @change="search"
                        ></u--input>
                    </u-form-item>
                </u--form>
            </view>
            
        </view>
          
        
          
        <view class="shop-store-manage__body mr-v-24">
            <view class="store-item border8 pd-v-24 bg-white mr-t-20 full-w box" v-for="(item,index) in list" :key="'check'+index">
                <view class="store-item__body pd-t-32 pd-b-24 border-b">
                    <view class="font32 lh-44 bold color-default">
                        {{item.name}}
                    </view>
                    <view class="mr-t-12 font26 lh-36 color-note">
                        设备数量  {{item.deviceCount || 0}}
                    </view>
                    <view class="mr-t-20 font26 lh-36 color-default">
                        {{item.merchantName}} 
                        {{item.repairPhone}}
                    </view>
                    
                </view>

                <view class="store-item__footer pd-h-16 flex flex-center">
                    <view class="flex-1">
                        
                    </view>

                    <u-button plain :customStyle="{height:'60rpx',marginLeft:'16rpx',width:'152rpx'}" shape="circle" color="#cccccc"  text="详情" @click="goDetail(item,index)"></u-button>
                    
                </view>
                
                
            </view>
        </view>
          
    </view>
</template>

<script setup>
import { useStore } from '@/store/index.js';
import { ref, reactive, onMounted, nextTick } from 'vue';
import { onLoad, onReady, onShow,onReachBottom } from '@dcloudio/uni-app';

import { storeList, storeUpdate, storeQueryById,storeDelete } from '@/api/proxy.js'

const store = useStore();
const form = ref({
    name: '',
    merchantName: ''
});


const uform = ref(null);
const timer = ref(null);
const list = ref([])
const total = ref(0);
const params = ref({
    pageNum: 1,
    pageSize: 10
})

onReady(() => {
    
})

onShow(() => {
    
})

onLoad(() => {
    getStoreList()
})


onReachBottom(() => {
    if(list.value.length < total.value) {
        params.value.pageNum++;
        getStoreList()
    }
})

const getStoreList = () => {
    uni.showLoading({
        title: '加载中...',
        mask: true
    });


    storeList({...form.value,...params.value}).then(res => {
        uni.hideLoading()
        console.log(res)
        if(res.code == 200) {
            list.value = [...list.value,...res.rows]
            total.value = res.total
        }
    }).catch(err => {
        uni.hideLoading()
        console.log(err)
    })
}


const search = () => {
    clearTimeout(timer.value);
    timer.value = setTimeout(() => {
        list.value = [];
        params.value.pageNum = 1;
        getStoreList()
    },1000)
        
}

const goDetail = (item,index) => {
    uni.navigateTo({
        url: `/sub_shop/pages/storeDetail/storeDetail?storeId=${item.id}`
    })
}


</script>

<style scoped lang="scss">
.shop-store-manage {
    background: #F7F7F7;
    min-height:100vh;

    .shop-store-manage__header {
        z-index: 2;
        padding-top:196rpx;
        
    }

    .shop-store-manage__body {
        z-index: 2;
        padding-bottom:220rpx;

        .store-item {
            .border-b {
                border-bottom:1px solid #EEEEEE;
            }
        }
    }

    .shop-store-manage__footer {
        box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.05);
        z-index: 10;
        left:0;
        bottom:0;
        height: 176rpx;
    }
    

    .add-popup {
        .add {
            left:24rpx;
            top:40rpx;
        }
    }
}
</style>
